<template>
	<view class="" style="width: 100%;min-height: 100vh;">
		<cu-custom :isBack="true" :bgColor="'var(--primaryBg)'" >
			<view slot="content">绑定宠物</view>
		</cu-custom>
		<view class="box" style="position: relative; top: -150rpx;">
			<view class="head">
			
				
				<view class="grow-record" style="margin-top: 300rpx;">
					
					<view class="photo-box-cont">
						<view class="photo-box">
							<image :src="cargoDetail.picture" mode="aspectFill"></image>
							<view class="photo-name">
								宠物头像
							</view>
						</view>
					</view>
					
					
					<view class="form-box">
						<view class="form-item">
							<view class="left">
								品种：
							</view>
							<view class="right flex align-center">
								<view class="name">
									{{cargoDetail.type2Str || '--'}}
								</view>
							</view>
						</view>
								
						<view class="form-item">
							<view class="left">
								性别：
							</view>
							<view class="right flex align-center">
								<view class="name">
									{{cargoDetail.sex == 'Male'? '男孩' : cargoDetail.sex == 'Female' ? '女孩' : '未知'}}
								</view>
							</view>
						</view>
								
						<view class="form-item">
							<view class="left">
								姓名：
							</view>
							<view class="right flex align-center">
								<view class="name">
									{{cargoDetail.name || '--'}}
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="left">
								出生年月：
							</view>
							<view class="right flex align-center" v-if="cargoDetail.birthday">
								<view class="name">
									{{cargoDetail.birthday.split(' ')[0] || '--'}}
								</view>
							</view>
						</view>	
						<view class="form-item" >
							<view class="flex">
								<view class="left">
									备注：
								</view>
								<view class="right flex align-center">
									<view class="name">
										{{cargoDetail.remark || '--'}}
									</view>
								</view>
							</view>
						</view>	
								
						
					
					</view>
					
					
					
					<view class="" style="height: 250rpx;">
					</view>			
				</view>
								
								
				

			</view>
		</view>


		<view class="bottom-box">
			<view class="bottom-btn" @click="bindCargo">
				确定绑定
			</view>
		</view>
		<loginModal ref="loginModal" @loginSuccess="loginSuccess"></loginModal>
	</view>
</template>

<script>
	import {
		getOtherGrantService
	} from "@/api/pet/service/saler.js"
	import {
		getCargoDetail,
		
	} from "@/api/pet/index/saler"
	import { bindCargo } from "@/api/pet/binding/index"
	import util from '@/common/util'
	export default {
		components: {},
		data() {
			return {
				myOptions:[],
				serviceIndex:-1,
				typeIndex: 0,
				scrollTop: 0,
				CustomBar: this.CustomBar,
				params: {
					page: 1,
					limit: 10,
				},
				list: [],
				total: 0,
				item: {},
				id:'1873638102620639233',
				cargoDetail:{}
			}
		},
		onLoad(options) {
			console.log('options',options)
			if (options.scene) {
				let scene = decodeURIComponent(options.scene)
				this.id = scene.split("=")[1]
				this.getCargoDetail()
			}
		},
		methods: {
			loginSuccess(){
				this.getCargoDetail()
			},
			getCargoDetail() {
				if (!util.isLogin.call(this)) {
					return
				}
				if(!this.id){
					uni.showToast({
						title:"没有宠物id",
						icon:"none"
					})
					return
				}
				getCargoDetail({
					id: this.id
				}).then(res => {
					this.cargoDetail = res || {}
					console.log(this.cargoDetail,'cargoDetail')
				})
			},
			bindCargo(){
				if (!util.isLogin.call(this)) {
					return
				}
				if(!this.id){
					uni.showToast({
						title:"没有宠物id",
						icon:"none"
					})
					return
				}
				if(this.cargoDetail.bindStatus == 'BINDED'){
					uni.showToast({
						title:"宠物已经被绑定了",
						icon:"none"
					})
					return
				}
				bindCargo({
					id: this.id
				}).then(res=>{
					if(res){
						uni.showToast({
							title:"绑定成功"
						})
						setTimeout(()=>{
							this.toPage()
						},500)
					}
				})
			},
			toPage() {
				uni.redirectTo({
					url: "/pages/index/index/index"
				})
			},
		},
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style scoped lang="scss">
	
	.photo-box-cont{
		position: absolute;
		top: -80rpx;
		left: 50%;
		transform: translateX(-50%);
		.photo-box{
			position: relative;
			image{
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				
			}
			.photo-name{
				position: absolute;
				width: 152rpx;
				height: 45rpx;
				background: #FFF6CD;
				border-radius: 29rpx;
				border: 2rpx solid #FFFFFF;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: var(--h1Color);
				line-height: 37rpx;
				text-align: left;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
				bottom: -20rpx;
			}
		}
	}
	
	.bottom-btn {
		margin-top: 20rpx;
	
		text-align: center;
		font-style: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		
		
		width: 314rpx;
		height: 106rpx;
		background: var(--primaryBg);
		border-radius: 53rpx;
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: var(--btnColor);
		line-height: 45rpx;
		text-align: center;
		font-style: normal;
	}
	
	.bottom-box{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		// width: 100%;
		// height: 200rpx;
		// background: #FFFFFF;
		padding: 0 32rpx;
		.num-box{
			padding-top: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: var(--h1Color);
			line-height: 37rpx;
			text-align: center;
			font-style: normal;
			.num{
				color: var(--primaryBg);
			}
		}
	}
	
	
	

	.box {
		width: 100%;
		display: flex;
		flex-direction: column;

		.head {
			width: 100%;
			padding: 12rpx 0 58rpx;
			height: 345rpx;
			display: flex;
			background: url('https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412310928308831.png') no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;

			.serve-record {
				width: 718rpx;
				height: 308rpx;
				background: #FFFFFF;
				padding: 24rpx;
				margin: 72rpx 16rpx 0 16rpx;
				border-radius: 10rpx;

				.record-name {
					padding-bottom: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: var(--h1Color);
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					border-bottom: 1rpx solid #EEEEEE;
				}

				.record-cont {
					.record-list {
						.record-item {
							.title {
								margin-bottom: 24rpx;
								margin-top: 28rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								font-size: 32rpx;
								color: var(--h1Color);
								line-height: 45rpx;
								text-align: left;
								font-style: normal;
							}
						}

						.form-box {
							.form-item {
								margin-bottom: 12rpx;
								display: flex;
								align-items: center;

								.label {
									width: 200rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color:var(--h2Color);
									line-height: 40rpx;
									text-align: left;
									font-style: normal;
								}

								.value {
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color: var(--h2Color);
									line-height: 40rpx;
									text-align: left;
									font-style: normal;
								}
							}
						}
					}
				}
			}

			.title-cont {
				width: 100%;
				margin-top: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}

				view {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: var(--h1Color);
					line-height: 56rpx;
					text-align: center;
					font-style: normal;
				}
			}
		}



	}




	.grow-record {
		position: relative;
		padding: 180rpx 24rpx 0 24rpx;
		// margin: 16rpx;
		// width: 718rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
	
		.form-box {
			// padding-bottom: 40rpx;
			// margin-bottom: 40rpx;
	
			.form-item {
				border-bottom: 1rpx dashed  #f4f4f4;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				// height: 144rpx;
				padding: 32rpx 0;
	
				&:last-child {
					border-bottom: 0;
				}
	
				.left {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: var(--h1Color);;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					width: 200rpx;
				}
	
				.right {
					flex: 1;
					.name {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: var(--h1Color);;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}
	}
	
	
	


</style>